<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加服务商</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body>
<div id="blank" class="header" style="border-bottom:1px solid #D6D6D6;color:#000">
    <div v-back.tapmode class="back"></div>
    <span class="title">添加服务商</span>
</div>
<div v-cloak id="app" class="top-container">
    <div class="shop-card">
      <img v-src="'../../image/usercard_add_id3.png'">
    </div>
    <div class="shop-set-container">
      <div class="inputtext">
        <input type="text" v-model="nickname" placeholder="请输入昵称">
      </div>
      <div class="inputtext" >
        <input type="text" v-model="invite_code" placeholder="请输入邀请码(选填)">
      </div>
      <div class="add_agreement">添加即表示您已阅读，并同意<span style="color:#9d0152" v-myclick="userAgreement" >《服务商合作协议》</span></div>
      <div class="shop-receivables">
        <span>合计缴费：</span>
        <span>￥{{fee}}</span>
      </div>
    </div>
    <div class="confirm-addshop" v-myclick="addShop">确认添加</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>

var memberTypes,
    wap_url,
    vm;
apiready = function () {
    showProgress();
    setBSImg();

    new Vue({
        el: '#blank'
    });
    wap_url = getPrefs("wap_url");
    var data = {
        member_id: getPrefs('member_id')
    };
    var callback = function (ret) {
        memberType = ret.content;
        fee = memberType.need_pay_fee;
        deposit = memberType.need_pay_deposit;
        total = memberType.need_pay_total;
        level_id = memberType.level_id;
        activity_id = memberType.activity_id;
        initApp();
        api.parseTapmode();
    }
    pinet.post(URL.addShopEdit, data, callback);

    addListeners();
};

function initApp() {
    vm = new Vue({
        el: '#app',
        data: {
            memberTypes: memberTypes,
            nickname: '',
            invite_code: '',
            select: -1,
            fee: fee,
            deposit: deposit,
            total: total,
            wap_url: wap_url,
            level_id: level_id,
            activity_id: activity_id,
            imgPath:'../../image/',
        },
        watch:{
            nickname:function (n, o) {
                this.nameByte = n.replace(/[^\x00-\xff]/g,"xx").length;
                if(this.nameByte > 12){
                    this.nickname = o;
                }
            }
        },
        computed: {
            _nickname: function () {
                return encodeURIComponent(this.nickname);
            }
        },
        methods: {
            addShop: function () {
                if (!this.nickname) {
                    alert('请输入昵称');
                    return;
                }
                showProgress();
                var data = {
                    member_id:getPrefs('member_id'),
                    invite_code:this.invite_code
                };
                var callback = function () {
                    var params = {
                        foreign_infos: vm.level_id + ';' + vm.activity_id + ';' + vm._nickname + ';' + vm.invite_code,
                        order_type: 1,
                    };
                    openWin('payment', params);
                };
                pinet.post(URL.isInviteCodeValid, data, callback);
            },
            userAgreement: function () {
                var url = this.wap_url + 'home/memberagreement';
                openWin('../home/browser', {url: url});
            },
            getBg: function (memberType) {
                var memberStyle = getMemberStyle(memberType.level_id);
                return {
                    backgroundImage:'url(' + this.imgPath + Vue.BSImg + '/' + memberStyle.levelup_bg +')'
                };
            }
        }
    });
}

function addListeners() {
    api.addEventListener({
        name: 'viewappear'
    }, function () {
        onPageStart();
    });

    api.addEventListener({
        name: 'viewdisappear'
    }, function (ret, err) {
        onPageEnd();
    });

    api.addEventListener({
        name: 'keyback'
    }, function (ret, err) {
        onPageEnd();
        api.closeWin();
    });
}
</script>
</html>
